<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>转学申请单</title>
<base href="http://lyear.itshubao.com/iframe/v5/">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
.col-lg-6{
    margin: 0px auto;
}
body,.container-fluid{
    background-color: #f4f5fa;
}
</style>
</head>  
<body>
<div class="container-fluid">  
  <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <header class="card-header"><div class="card-title">转学申请单</div></header>
        <div class="card-body">
        <div class="mb-3">
            <label for="inlineRadio1" class="form-label">转学类型：</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked="checked">
                <label class="form-check-label" for="inlineRadio1">申请转入</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">申请转出</label>
            </div>
        </div>
        <div class="mb-3">
            <label for="name" class="form-label">学生姓名</label>
            <input type="text" class="form-control" id="name" placeholder="填写学生姓名">
        </div>
        <div class="mb-3">
            <label for="phone" class="form-label">家长联系电话</label>
            <input type="text" class="form-control" id="phone" placeholder="填写家长联系电话">
        </div>
        <div class="mb-3">
            <label for="id_card" class="form-label">身份证号码</label>
            <input type="text" class="form-control" id="id_card" placeholder="填写身份证号码">
        </div>
        <div class="mb-3">
            <label for="address" class="form-label">家庭住址</label>
            <input type="text" class="form-control" id="address" placeholder="填写家庭住址">
        </div>
        <div class="mb-3">
            <label for="nationality" class="form-label">民族</label>
            <input type="text" class="form-control" id="nationality" placeholder="填写民族">
        </div>
        <div class="mb-3">
            <label for="school" class="form-label">转学学校</label>
            <input type="text" class="form-control" id="school" placeholder="填写转学学校">
        </div>
        <div class="mb-3">
            <label for="reason" class="form-label">申请转学理由</label>
            <textarea class="form-control" id="reason" rows="3" placeholder="申请转学理由"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">提交</button>
      </div>
    </div>
  </div>
</div>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script> -->
<script type="text/javascript" src="http://mirror.fe80.cn/layui/2.6.8/layui.js"></script>
<script>
var $ = layui.jquery;
$('button[type=submit]').on('click',function(){
    var data = {};
    data.type = $('input[name="inlineRadioOptions"]:checked').val();
    data.name = $('#name').val();
    data.phone = $('#phone').val();
    data.id_card = $('#id_card').val();
    data.address = $('#address').val();
    data.nationality = $('#nationality').val();
    data.school = $('#school').val();
    data.reason = $('#reason').val();
    if(data.name.length < 2){
        layui.layer.msg('请输入姓名');
        $('#name').focus();
        return false;
    }
    if(/^1[3-9]\d{9}$/.test(data.phone)==false){
        layui.layer.msg('请输入正确的手机号码');
        $('#phone').focus();
        return false;
    }
    if(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/.test(data.id_card)==false){
        layui.layer.msg('请输入18位身份证号码');
        $('#id_card').focus();
        return false;
    }
    if(data.address.length < 6){
        layui.layer.msg('请输入身份证上的住址');
        $('#address').focus();
        return false;
    }
    if(data.nationality.length < 1){
        layui.layer.msg('请输入民族');
        $('#nationality').focus();
        return false;
    }
    if(data.school.length < 6){
        layui.layer.msg('请输入学校全称');
        $('#school').focus();
        return false;
    }
    if(data.reason.length < 4){
        layui.layer.alert('请输入转学理由<br>如：随亲就读、回原籍就读',{title:'提示'});
        $('#reason').focus();
        return false;
    }
    layui.layer.load();
    $.post('?',data,function(res){
        layui.layer.closeAll('loading');
        if(res.state == 1){
            layui.layer.msg('提交成功');
        }
    });
});
</script>
</body>
</html>